
/*顶部导航样式*/
/*最外层*/
.topnav{
    height: 40px;
    background-color:#333333 ;
}

/*顶部导航左侧*/
.topnav-left{
    float: left;
}
/*顶部导航右侧*/
.topnav-right{
    float: right;
}

/*顶部导航左侧的a标签的样式*/

/*.topnav-left a{*/
    /*float: left;*/
    /*color: #b0b0b0;*/
    /*line-height: 40px ;*/
/*}*/
/*.topnav-left i{*/
    /*float: left;*/
    /*color: #b0b0b0;*/
    /*line-height: 40px;*/
    /*margin: 0 7px;*/
/*}*/

/*顶部导航右侧 a标签样式 */
/*.topnav-right a{*/
    /*float:left;*/
    /*color: #b0b0b0;*/
    /*line-height: 40px;*/
/*}*/


.topnav-left a ,
.topnav-right a{
    float: left;
    color: #b0b0b0;
    line-height: 40px ;
}

.topnav-left i,
.topnav-right i{
    float: left;
    color: #b0b0b0;
    line-height: 40px;
    margin: 0 7px;
}


.topnav-right  .cart{
    width: 120px;
    margin-left: 24px;
    background-color: #424242;
    text-align: center;
    height: 40px;
}


/*给顶部导航的a标签添加 鼠标悬停效果*/
.topnav-left a:hover,
.topnav-right a:hover{
    color: white;
}

/*给购物车设置鼠标悬停特效*/
.topnav-right .cart:hover{
    color: #ff6700;
    background-color: white;
}




/*搜索导航*/
.searchnav{
    height: 100px;
}

/* 搜索导航 左侧logo样式的书写 */
.searchnav-logo{
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    float: left;
    margin-top: calc((100px - 55px) / 2);
    padding: 3px;
    box-sizing: border-box;
}

/*搜索导航的热搜列表*/
.search-tab{
    float: left;
    height: 100px;
    margin-left: 180px;
}
/*搜索导航热搜列表中的a标签*/
.search-tab a{
    float: left;
    height: 100px;
    line-height: 100px;
    font-size: 15px;
    margin-left: 18px;
}
/*搜索导航热搜列表中的a标签 鼠标移动变色*/
.search-tab a:hover{
    color: #ff6700;
}

/*搜索导航, 右侧搜索条样式*/
.searchnav-search{
    position: relative;
    float: right;
    border: 1px solid #e0e0e0;
    width: 296px;
    height: 50px;
    margin-top: calc((100px - 50px) /2 );

}

/*搜索条 输入框样式*/
.searchnav-search input{
    float: left;
    height: 50px;
    width: 244px;
    border: none;
    border-right: 1px solid #e0e0e0;
    box-sizing: border-box;
}
/*搜索条 搜索按钮样式*/
.searchnav-search button{
    float: left;
    height: 50px;
    width: 52px;
    border: none;
    background-color: white;
    font-size: 24px;
}
/*鼠标移入后背景色改变*/
.searchnav-search button:hover{
    background-color: #ff6700;
    color: white;
}
/*输入框中的热词特效*/
.searchnav-search-keys{
    position: absolute;
    left: 58px;
    top: 20px;
}
.searchnav-search-keys span{
    background-color: #eeeeee;
    font-size: 11px;
    margin-right: 9px;
}





/* 轮播图  */
.carousel{
    height: 460px;
}
/*左侧列表*/
.carousel-left-list{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #a19891d4;
    width: 234px;
    height: 460px;
    padding-top: 21px;
    box-sizing: border-box;
}

.carousel-left-list a{
    display: block;
    height: 42px;
    line-height: 42px;
    /* border: 1px solid #ff6700; */
    color: white;
    font-size: 13px;
    padding-left: 30px;
    padding-right: 23px;
}

.carousel-left-list a i{
    float: right;
}

.carousel-img{
    display: block;
    height: 460px;
}

/*给左侧列表 a标签添加鼠标悬停变色 */
.carousel-left-list a:hover{
    background-color: #ff6700;
}
/* 轮播图 左侧导航*/
.carousel-left-nav{
    position: absolute;
    top: 40%;
    left: 234px;
    width: 40px;
    height: 61px;
    /* background-color: green; */
    font-size: 40px;
    line-height: 61px;
    color: #d4d0cd;
}

.carousel-left-nav:hover{
    background-color: #7a7169;
    color: white;
}
/* 轮播图右侧导航*/
.carousel-right-nav{
    position: absolute;
    top: 40%;
    right: 0px;
    width: 40px;
    height: 61px;
    /* background-color: green; */
    font-size: 40px;
    line-height: 61px;
    color: #d4d0cd;
}

.carousel-right-nav:hover{
    background-color: #7a7169;
    color: white;
}
/*圆点导航 */
.dotnav{
    position: absolute;
    right: 33px;
    bottom: 26px;

}

.dotnav li{
    display: inline-block;
    border: 2px solid;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #93887e;
    margin-right: 4px;
}

.dotnav li:hover{
    background-color: #f9eee4;
}


/* 4.优惠商品 */

/*设置最外层的高度 */
.discount{
    height: 170px;
    margin-top: 14px;
}

.discount-left{
    float: left;
    background-color: #5f5750;
    width: 234px;
    height: 170px;
}
.discount-right{
    float: left;
    margin-left: 14px;
}

.discount-right a{
    float: left;
    /* margin-left: 14px; */
    width: 316px;
    height: 170px;
}
.discount-right a img{
    width: 100%;
    height: 100%;
}
/* 给中间 a标签添加空隙方式1 */
/*.discount-right-mid{*/
    /*margin: 0px 15px;*/
/*}*/

/* 给中间 a标签添加空隙方式2 */

.discount-right a:nth-child(2){
    margin: 0px 15px;
}



/* <!--优惠商品左侧各种设置-->*/
.discount-left a{
    float: left;
    width:calc(234px / 3) ;
    height: calc(170px / 2);
    text-align: center;
    /*透明度*/
    opacity: 0.5;
    /* 为了 设置 线的位置 */
    position: relative;
}

/*鼠标悬停 */
.discount-left a:hover{
    /*透明度*/
    opacity: 1;
}

/* 左侧 a标签中的扸*/
.discount-left a img{
    width: 22px;
    height: 22px;
    margin-top: 20px;
    margin-bottom: 5px;

}
/* 左侧 a中的文字 */
.discount-left a span{
    display: block;
    color: white;
}

/*给 左侧 a标签添加 两根线 */
.discount-left a:before{
    content: '';
    width: 63px;
    height: 1px;
    position: absolute;
    top: 2px;
    left: 10px;
    background-color: #7d7575;
}
.discount-left a:after{
    content: '';
    width: 1px;
    height: 70px;
    position: absolute;
    top: 10px;
    left: 2px;
    background-color: #7d7575;
}


/*小米闪购 */
.flash{
    height: 403px;
    background-color: #f5f5f5;
    margin-top: 26px;
}
/*闪购标题*/
.flash-title{
    height: 62px;
}
.flash-title h1{
    float: left;
    font-size: 21px;
    margin-top: 19px;
    font-weight: lighter;
}

.flash-title-right{
    float: right;
    width: 71px;
    height: 24px;
    border: 1px solid #e0e0e0;
    margin-top: 28px;
}

.falsh-title-a-left{
    float: left;
    height: 24px;
    width: calc(70px / 2);
    text-align: center;
    line-height: 24px;
    color: #b1b0b0;
    border-right: 1px solid #e0e0e0;
}

.falsh-title-a-right{
    float: left;
    height: 24px;
    width: calc(70px / 2);
    text-align: center;
    line-height: 24px;
    color: #b1b0b0;
}

.flash-title-right a:hover{
    color: #ff6700;
}

/* 闪购内容 样式*/
.flash-content{
    height: 340px;
}
/*闪购左侧 */
.flash-content-left{
    border-top: 1px solid red;
    float: left;
    width: 234px;
    height: 100%;
    background-color: #f1eded;
    text-align: center;
}

.flash-content-left h3{
    font-size: 19px;
    color: red;
    margin-top: 62px;
    margin-bottom: 36px;
}

.flash-content-left p{
    color: #878589;
    font-size: 14px;
    margin-bottom: 32px;
    margin-top: 30px;
}

.flash-content-left span{
    display: inline-block;
    width: 46px;
    height: 46px;
    color: white;
    font-size: 19px;
    background-color: #605751;
    text-align: center;
    line-height: 46px;
}

.flash-content-left small{
    font-weight: 700;
    font-size: 26px;
}

.flash-content-right{
    float: left;
    height: 340px;
    width: calc(1226px - 234px);
}

/*闪购右侧 */
.flash-content-right-product{
    float: left;
    width: 234px;
    height: 340px;
    margin-left: 14px;
    background-color: white;
    text-align: center;
    padding-top: 47px;
    box-sizing: border-box;
    border-top: 1px solid blue;
}
.flash-content-right-product h3{
    font-size: 13px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    padding-left: 10px;
    padding-right: 12px;
}

.flash-content-right-product p{
    color: #7a7169;
    font-size: 11px;
    margin-top: 12px;
    margin-bottom: 18px;

}

.flash-content-right-product .newprice{
    font-size: 12px;
    color: #ff6700;
}

.flash-content-right-product .oldprice{
    font-size: 12px;
    color: #7a7169;
    text-decoration: line-through;
}

/*广告 */
.ad1{
    height: 120px;
    background-color: #f5f5f5;
    padding-top: 22px;
}

.ad1 img{
    width: 100%;
    height: 100%;
}




/*手机 */
.phone{
    height: 694px;
    background-color:#f5f5f5 ;
}

/*标题样式*/
.phone-title{
    height: 80px;
}

.phone-title h1{
    float: left;
    font-size: 21px;
    font-weight: lighter;
    margin-top: 40px;
}

.phone-title a{
    float: right;
    font-size: 15px;
    margin-top: 40px;
    transition: all .5s;
}

.phone-title a i{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #b0b0b0;
    color: white;
    border-radius: 100%;
    font-size: 10px;
    text-align: center;
    padding: 4px;
    line-height: 16px;
    transition: all .5s;
}

.phone-title a:hover{
    color: #ff6700;
}

/*当鼠标移动到 a标签的时候 改变其子元素的 背景颜色 */
.phone-title a:hover i{
    background-color: #ff6700;
}


.phone-content{
    height: 614px;
}

.phone-content-left{
    height: 614px;
    width: 234px;
    float: left;
}
.phone-content-left img{
    width: 100%;
    height: 100%;
}


/*手机右侧 */
.phone-content-right-product{
    float: left;
    width: 234px;
    height: 300px;
    margin-left: 14px;
    background-color: white;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top:0px;
    left: 0px;
    transition: all 0.5s;
}

/*给 手机商品添加鼠标移入事件,  让他相对原来的位置往上移动1像素, 同时添加一个阴影特效 */
.phone-content-right-product:hover{
    top: -1px;
    box-shadow: 0px 10px 22px;
}


/*给前四个设置一个  下外边距 为 14px */
.phone-content-right-product:nth-child(-n+4){
    margin-bottom: 14px;
}


.phone-content-right-product h3{
    font-size: 13px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    padding-left: 10px;
    padding-right: 12px;
}

.phone-content-right-product p{
    color: #7a7169;
    font-size: 11px;
    margin-top: 12px;
    margin-bottom: 18px;

}

.phone-content-right-product .newprice{
    font-size: 12px;
    color: #ff6700;
}

.phone-content-right-product .oldprice{
    font-size: 12px;
    color: #7a7169;
    text-decoration: line-through;
}



/*家电 */
.homeapp{
    height: 694px;
    background-color: #f5f5f5;
}
.homeapp-title{
    height: 80px;
}
.homeapp-title h1{
    float: left;
    font-size: 20px;
    margin-top: 40px;
    font-weight: lighter;
}
.homeapp-title-right{
    float: right;
    margin-top: 42px;
    font-size: 17px;
}

.homeapp-title-right a:first-child{
    color: #ff6700;
    padding-bottom: 3px;
    border-bottom: 2px solid #ff6700;
    margin-right: 29px;
}




/*家电商品 */
.homeapp-content-product{
    float: left;
    width: 234px;
    height: 300px;
    margin-left: 14px;
    background-color: white;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top:0px;
    left: 0px;
    transition: all 0.5s;
}

/*给第1个商品 和 第6个商品 左侧的 外边距去掉*/
.homeapp-content-product:nth-child(1),
.homeapp-content-product:nth-child(6){
    margin-left: 0px;
}


/*给 手机商品添加鼠标移入事件,  让他相对原来的位置往上移动1像素, 同时添加一个阴影特效 */
.homeapp-content-product:hover{
    top: -1px;
    box-shadow: 0px 10px 22px;
}


/*给前5个设置一个  下外边距 为 14px */
.homeapp-content-product:nth-child(-n+5){
    margin-bottom: 14px;
}


.homeapp-content-product h3{
    font-size: 13px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    padding-left: 10px;
    padding-right: 12px;
}

.homeapp-content-product p{
    color: #7a7169;
    font-size: 11px;
    margin-top: 12px;
    margin-bottom: 18px;

}

.homeapp-content-product .newprice{
    font-size: 12px;
    color: #ff6700;
}

.homeapp-content-product .oldprice{
    font-size: 12px;
    color: #7a7169;
    text-decoration: line-through;
}



.homeapp-content-more{
    float: left;
    width: 234px;
    height: 300px;
    margin-left: 14px;
    background-color: transparent;
}

.homeapp-content-more  a{
    display: block;
    height: 143px;
    background-color: white;
    position: relative;
    top:0px;
    left: 0px;
    transition: all 0.5s;
}

/*给 手机商品添加鼠标移入事件,  让他相对原来的位置往上移动1像素, 同时添加一个阴影特效 */
.homeapp-content-more  a:hover{
    top: -1px;
    box-shadow: 0px 10px 22px;
}

.homeapp-content-more  a:first-child{
    margin-bottom: 14px;
}


.homeapp-content-more-text{
    float: left;
    padding-left: 27px;
}
.homeapp-content-more img{
    float: right;
    width: 80px;
    height: 80px;
    margin-top: 40px;
    margin-right: 20px;
}


.homeapp-content-more-text p{
    width: 90px;   /*加宽度让字变大的时候自动换行 */
    font-size: 14px;
    margin-top: 46px;
    margin-bottom: 15px;
    font-weight: 200;
}

.homeapp-content-more-text span{
    color: #ff6700;
    font-size: 12px;
}


.homeapp-content-more-text h3{
    margin-top: 54px;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
}

.homeapp-content-more-text small{
    font-size: 12px;
    color: gray;
}
.homeapp-content-more i{
    float: right;
    font-size: 49px;
    margin-top: 47px;
    margin-right: 47px;
    color: #ff6700;
}





/*视频 */

.video{
    background-color: #f5f5f5;
    padding-bottom: 25px;
}



/*标题样式*/
.video-title{
    height: 80px;
}

.video-title h1{
    float: left;
    font-size: 21px;
    font-weight: lighter;
    margin-top: 40px;
}

.video-title a{
    float: right;
    font-size: 15px;
    margin-top: 40px;
    transition: all .5s;
}

.video-title a i{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #b0b0b0;
    color: white;
    border-radius: 100%;
    font-size: 10px;
    text-align: center;
    padding: 4px;
    line-height: 16px;
    transition: all .5s;
}

.video-title a:hover{
    color: #ff6700;
}

/*当鼠标移动到 a标签的时候 改变其子元素的 背景颜色 */
.video-title a:hover i{
    background-color: #ff6700;
}

/*视频内容的宽高 */
.video-content{
    height: 285px;
}

/*给每个a标签设置样式*/
.video-content-item{
    float: left;
    height: 285px;
    width: 296px;
    margin-right: 14px;
    position: relative;
    background-color: white;
}

/*定位到最后一个a标签 设置右侧外边距为 0 */
.video-content-item:last-child{
    margin-right: 0px;
}

/*视频图片的宽高 */
.video-content-item img{
    width: 100%;
    height: 180px;
}

.video-content-item p{
    margin-top: 31px;
    text-align: center;
    font-size: 14px;
}

.video-content-play{
    position: absolute;
    top: 145px;
    left: 20px;
    width: 35px;
    height: 24px;
    border: 2px solid white;
    text-align: center;
    line-height: 24px;
    color: white;
    font-size: 25px;
    border-radius: 41%;
    transition: all 0.5s;
}

.video-content-play:hover{
    background-color: #ff6700;
    border: #ff6700;
}


/*售后 */

/*最外层背景色 */
.after-sale{
    background-color: white;
}

.after-sale-main {
    height: 80px;
    border-bottom: 2px solid #b0b0b0;
}

.after-sale-main a{
    float: left;
    font-size: 15px;
    height: 25px;
    width: 243px;
    border-right: 1px solid #cac0c0;
    text-align: center;
    margin: 30px auto;
}

.after-sale-main a:last-child{
    border-right: none;
}
.after-sale-main a i{
    font-size: 24px;
    vertical-align: middle;
}

/*其他*/
.other{
    margin-top: 38px;
    height: 198px;
}

.other-left{
    float: left;
    width: 977px;
    height: 112px;
    border-right: 1px solid #c4c4c4;
}
.other-right{
    float: right;
    text-align: center;
    width: calc(1226px - 978px);
}

.other-left dl{
    float: left;
    margin-right: 100px;
}

.other-left dl dt{
    font-size: 14px;
    margin-bottom: 28px;
    font-weight: 600;
}

.other-left dl dd{
    font-size: 12px;
    color: #e0e0e0;
    margin-bottom: 15px;
    margin-left: 0px;
}

.other-left a{
    color: #a2a2a2;
}

.other-left a:hover{
    color: #ff6700;
}


.other-right h1{
    font-size: 18px;
    color: #ff6700;
    margin-bottom: 10px;
}


.other-right p{
    margin-bottom: 16px;
    color: #6d6863;
}


.other-right a{
    display: inline-block;
    border: 1px solid #ff6700;
    color: #ff6700;
    width: 120px;
    height: 30px;
    line-height: 30px;
}



/*底部 */
.footer{
    background-color:#fafafa;
    padding-top: 28px;
}


/* 搜索导航 底部 footer-logo 样式的书写 */
.footer-logo{
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    float: left;
    margin-top: calc((100px - 55px) / 2);
    padding: 3px;
    box-sizing: border-box;
}

/*右侧设置浮动*/

.footer-right{
    float: left;
    margin-top: 22px;
    margin-left: 10px;
}

.footer-alist i{
    margin-left: 5px;
    margin-right: 2px;
}

.footer-copyright{
    margin-top: 5px;
}
.footer-copyright a{
    color: #c2c2c2;
}

.footer-imgs img{
    float: left;
    width: 83px;
    height: 28px
}

.footer-slogan{
    margin-left: 50%;
}


.footer a:hover{
    color: #ff6700;
}
